<template>
  <div class="app-container">
    <div class="title-text">后台功能权限设置</div>
    <div class="box">
      <div class="horizontal-tree" v-if="treeData && treeData.length">
        <div v-for="node in treeData" :key="node.id" class="tree-node">
          <el-checkbox-group v-model="menuIds">
            <el-checkbox :value="node.id" :label="node.id" @change="handleChange(node)">{{ node.label }}</el-checkbox>
          </el-checkbox-group>
          <div v-if="node.children && node.children.length" class="children">
            <div v-for="child in node.children" :key="child.id" class="child-node">
              <el-checkbox-group v-model="menuIds">
                <el-checkbox v-model="child.checked" :value="child.checked" :label="child.id" @change="handleChildChange(child)">{{ child.label }}</el-checkbox>
              </el-checkbox-group>
              <!-- <el-checkbox v-model="child.checked" :value="child.checked" :label="child.id" @change="handleChildChange(child)">{{ child.label }}</el-checkbox> -->
            </div>
          </div>
          <!-- <el-checkbox :value="node.checked" :label="node.id" @change="handleChange(node)">{{ node.label }}</el-checkbox>
          <div v-if="node.children && node.children.length" class="children">
            <div v-for="child in node.children" :key="child.id" class="child-node">
              <el-checkbox v-model="child.checked" :value="child.checked" :label="child.id" @change="handleChildChange(child)">{{ child.label }}</el-checkbox>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <AddFooter @submitForm="submitForm"></AddFooter>
  </div>
</template>

<script>
  import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
  import  HorizontalTree  from "../agentManage/HorizontalTree.vue";
  import { listAgentAuthorized } from "@/api/agent/agentManage";
  import AddFooter from "@/components/AddFooter/index";
  import { updateRole } from "@/api/system/role";
  export default {
    name: "permissionSettings",
    components: {
      HorizontalTree,
      AddFooter
    },
    data() {
      return {
        // 菜单列表
        treeData: [],
        menuOptions: [],
        // 已选的权限Id
        menuIds: [],
        checkedIds: [],
      }
    },

    created() {
      this.getMenuTreeselect();
    },
    methods: {
      /** 查询菜单树结构 */
      getMenuTreeselect() {
        return Promise.all([
          menuTreeselect().then(response => response.data),
          listAgentAuthorized(this.$route.query.id).then(res => res.data.menuIds)
        ]).then(([menuOptions, menuIds]) => {
          this.menuOptions = menuOptions;
          this.menuIds = menuIds;
          this.menuOptions.forEach(node => {
            node.checked = this.menuIds.includes(node.id);
            if(node.children && node.children.length > 0) {
              node.children.forEach(child => {
                child.checked = this.menuIds.includes(child.id);
              })
            }
          });
          this.treeData = [...this.menuOptions];
        });
      },
      handleChange(node) {
        node.checked = !node.checked;
        if(node.children && node.children.length > 0) {
          if(node.checked) {
            node.children.forEach(child => {
              this.menuIds.push(child.id);
            })
          } else {
            node.children.forEach(child => {
              const index = this.menuIds.indexOf(child.id);
              if (index > -1) {
                this.menuIds.splice(index, 1);
              }
            })
          }
        }
      },
      handleChildChange(child){
        child.checked = !child.checked;
      },
      /** 提交按钮 */
      submitForm() {
        // this.form.menuIds = this.checkList;
        let params = {};
        params.menuIds = this.menuIds;
        params.roleId = this.$route.query.id;
        updateRole(params).then(response => {
          this.$modal.msgSuccess("修改成功");
          // this.$router.push({ path: '/agentManage/index' });
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
.box {
  background-color: #EFF2FF;
  padding: 38px 46px;
  margin: 32px 45px;
  .horizontal-tree {
    display: flex;
    flex-wrap: wrap; /* 如果父节点太多需要换行，可以保留这个属性 */
    align-items: flex-start; /* 确保所有父节点在垂直方向上对齐 */
  }

  .tree-node {
    /* 父节点的样式 */
    margin-right: 70px; /* 控制父节点之间的水平间距 */
    /* 注意：我们不再需要 display: flex; 除非你有其他需要在父节点内部使用 flex 的理由 */
  }

  .children {
    /* 子节点的容器样式，使其垂直堆叠 */
    display: block; /* 默认就是 block，但明确写出有助于理解 */
    margin-top: 15px; /* 子节点与父节点之间的垂直间距 */
    margin-left: 28px;
    margin-bottom: 25px;
  }

  .child-node {
    margin-top: 12px;
    /* 子节点的样式（如果需要的话） */
    /* 这里可以添加一些内边距或边框等样式来区分子节点 */
  }
}
</style>
